<template>
  <el-card shadow="hover">
    <el-form>
      <el-form-item label="属性名">
        <el-input
          input-style="width:200px"
          placeholder="请输入属性名"
          v-model.trim="attrList.attrName"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="addAttrValue"
          :disabled="!attrList.attrName"
          >添加属性名</el-button
        >
        <el-button @click="showAttrList">取消</el-button>
        <el-table :data="attrList.attrValueList" style="width: 100%">
          <el-table-column label="序号" width="180" type="index" />
          <el-table-column label="属性值名称">
            <template v-slot="{ row, $index }">
              <el-input
                size="small"
                ref="inputRef"
                placeholder="请输入属性值"
                v-model="row.valueName"
                v-if="row.isShowEdit"
                @blur="showValueName(row, $index)"
              ></el-input>
              <div v-else @click="showEditValueName(row)">
                {{ row.valueName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="800">
            <template v-slot="{ row, $index }">
              <el-popconfirm
                :title="`确认要删除${row.valueName}吗?`"
                @confirm="confirmEvent($index)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="saveAddOrUpdate"
          :disabled="isDisabled"
          >保存</el-button
        >
        <el-button @click="showAttrList">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { Delete } from "@element-plus/icons-vue";
import { nextTick } from "vue";
import { reactive, ref, computed } from "vue";
import {
  CategoryBasicAttrItem,
  AttrValueListItem,
} from "@/api/product/modules/categoryModules";
import { addOrUpdateAttrValueApi } from "@/api/product/category";
import { useCategoryStore } from "@/stores/category";
import { useAttrStore } from "@/stores/attr";
const categoryStore = useCategoryStore();
const emit = defineEmits(["setShowAttrList"]);

const showAttrList = async () => {
  emit("setShowAttrList", true);
};

defineOptions({
  name: "AddOrUpdateAttr",
});

// 添加属性名
const attrStore = useAttrStore();
const attrList = reactive<CategoryBasicAttrItem>({
  attrName: attrStore.attrName,
  attrValueList: attrStore.attrValueList,
});
const inputRef = ref();
const addAttrValue = async () => {
  attrList.attrValueList.push({
    valueName: "",
    // 添加一个标识，代表显示和编辑模式切换
    isShowEdit: true,
  });
  await nextTick();
  inputRef.value.focus();
};

// 失去焦点隐藏输入框
const showValueName = (row: AttrValueListItem, index: number) => {
  if (!row.valueName) {
    // 删除整行数据
    attrList.attrValueList.splice(index, 1);
    return;
  }
  row.isShowEdit = false;
};
// 点击显示输入框
const showEditValueName = async (row: AttrValueListItem) => {
  row.isShowEdit = true;
  await nextTick();
  // 让 input 获取焦点
  inputRef.value.focus();
};
// 点击保存发送请求，保存数据
const saveAddOrUpdate = async () => {
  await addOrUpdateAttrValueApi({
    id: attrStore.id,
    ...attrList,
    categoryId: categoryStore.category3Id,
    categoryLevel: 3,
  });
  ElMessage.success(`${attrStore.id ? "修改" : "添加"}属性成功!`);
  showAttrList();
};
// 点击删除按钮后，气泡确认框的确定触发的事件
const confirmEvent = (index: number) => {
  attrList.attrValueList.splice(index, 1);
};
// 保存按钮是否禁用
const isDisabled = computed(() => {
  return !(
    attrList.attrName &&
    attrList.attrValueList.length > 0 &&
    attrList.attrValueList.every((attrValue) => {
      return attrValue.valueName;
    })
  );
});
// const cancelEvent = () => {
//   console.log("cancel!");
// };
</script>

<style scoped lang="scss"></style>
